<script setup lang="ts">
import { getImgUrl } from '@/tools';
import { computed, unref, watch } from 'vue';
interface Props {
  fileid?: string | number,
  nullvaluetip?: string,
}
const props = defineProps<Props>()
const evnets = defineEmits(['click', 'load', 'error'])
const token = sessionStorage.getItem('token')
const computedSrc = computed(() => {
  if (!props.fileid) {
    return ''
  }
  return getImgUrl(props.fileid, token)
})
watch(() => props.fileid, v => {
  if (!v) evnets('error')
})
function handleClick() {
  evnets('click', computedSrc.value)
}
function handleLoaded(e: Event) {
  evnets('load', { name: props.fileid, url: unref(computedSrc) })
}
defineExpose({ src: computedSrc })

</script>
<template>
  <ElImage v-if="computedSrc" @load="handleLoaded" @error="$emit('error', $event)" @click="handleClick"
    :src="computedSrc" >
  </ElImage>
  <div v-else class="el-image__error">{{ nullvaluetip || '没有图片' }}</div>
</template>